<template>
  <div>
    <el-avatar :src="player.headUrl || headUrl" @error="false"/>
    <p><el-link type="primary" @click="onUpload">上传头像</el-link></p>
    <p class="title">{{ player.name || 'NULL' }}</p>
    <p>棋力：{{ player.level || 'NULL' }}</p>
    <p>胜场：{{ player.rate || 0 }}</p>
    <p>场次：{{ player.session || 0 }}</p>
    <p>逃跑：{{ player.escape || 0 }}</p>
    <el-tag :type="ready ? 'success' : 'warning'">{{ ready ? '已准备' : '未准备' }}</el-tag>
  </div>
</template>

<script>
export default {
  name: 'Player',
  props: {
    player: {
      type: Object,
      default: () => {}
    },
    ready: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {headUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'};
  },
  methods: {
    onUpload: function () {
      if (!this.player) {
        return;
      }
      this.$prompt('请输入图片链接', '上传头像', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({value}) => {
        this.$emit('upload-avatar', value);
      });
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 1.5em;
}
</style>
